<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="典当记录上报详情页 "
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">单位信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <div class="value common-value">{{ companyMessage.companyMessage || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">详细地址</div>
              <div class="value common-value">{{ companyMessage.communityName || '暂无' }}</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位负责人</div>
              <div class="value common-value">{{ companyMessage.dutyPersonName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">联系电话</div>
              <div class="value common-value">
                {{ companyMessage.mobile || '暂无' }}
              </div>
            </div>
          </div>
        </div>
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">典当物品</div>
        </div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="pawnItemList"
          :pagination="false"
          style="margin: 20px 0; border: 1px solid #154b81"
        >
          <template slot="action" slot-scope="text, record">
            <span class="operation deatil-color" @click="detailHandle([record.pawnItemPhoto])">查看</span>
          </template>
        </a-table>
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">当户信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">当户姓名</div>
              <div class="value common-value">{{ pawnRecord.pawnName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">联系电话</div>
              <div class="value common-value">
                {{ pawnRecord.pawnPhone || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">身份证号</div>
              <div class="value common-value">{{ pawnRecord.pawnIdCard || '暂无' }}</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">典当信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">合计金额</div>
              <div class="value common-value">{{ amount + '元' || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">典当期限</div>
              <div class="value common-value">
                {{ moment(pawnRecord.pawnStartTime).format('YYYY/MM/DD') }}至{{
                  moment(pawnRecord.pawnEndTime).format('YYYY/MM/DD')
                }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">上报时间</div>
              <div class="value common-value">{{ pawnRecord.createTime || '暂无' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { machinePrintRecordDetails } from '@/api/api'
import { pawnRecordDetails } from '../../../../api/api'
import { previewImage } from '../../../../utils/util'

export default {
  name: 'houseDetail',
  components: { publicModal, startEndTime },
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/common/project_company_serve_record/page',
      },
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '物品名称',
          align: 'center',
          dataIndex: 'pawnItemName',
          ellipsis: true,
        },
        {
          title: '规格状况',
          align: 'center',
          dataIndex: 'pawnItemSpecifications',
          ellipsis: true,
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'pawnItemNumber',
          ellipsis: true,
          customRender: function (t, r, index) {
            return t + '个'
          },
        },
        {
          title: '金额',
          align: 'center',
          dataIndex: 'pawnItemMoney',
          ellipsis: true,
          customRender: function (t, r, index) {
            return t + '元'
          },
        },
        {
          title: '照片',
          align: 'center',
          dataIndex: 'fGmsfhm',
          ellipsis: true,
          scopedSlots: { customRender: 'action' },
        },
      ],
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,
      isTsyfwinfo: {},
      policeHouseMainsList: {},
      companyMessage: {},
      machinePrintRecord: {},

      companyMessage: [],
      pawnRecord: [],
      pawnItemList: [],
      amount: 0,
    }
  },

  methods: {
    detailHandle(urls) {
      console.log(urls)
      previewImage.call(this, urls)
    },
    async show(records) {
      this.publicVisible = true
      this.getDetail(records)
    },
    getDetail(records) {
      const params = {
        id: records.id,
      }
      pawnRecordDetails(params).then((res) => {
        if (res.code == 200) {
          const { companyMessage, pawnRecord } = res.result
          this.companyMessage = companyMessage
          this.pawnRecord = pawnRecord
          this.pawnItemList = pawnRecord.pawnItemList ? pawnRecord.pawnItemList : []
          this.amount = pawnRecord.pawnItemList.reduce((acc, curr) => {
            acc += curr.pawnItemMoney
            return acc
          }, 0)
        } else {
        }
      })
    },
    handleOk() {
      this.publicVisible = false
    },

    cancel(target) {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

.img-style-wrapper {
  width: 140px;
  height: 124px;
  border-radius: 8px 8px 8px 8px;
  object-fit: cover;
}
</style>
